<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>YUI Browser History Manager - TabView (YUI Library)</title>
    <link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css"/>
    <link rel="stylesheet" type="text/css" href="../../../examples/assets/dpSyntaxHighlighter.css"/>
    <link type="text/css" rel="stylesheet" href="../assets/tutorial.css"/>
  </head>
  <body>
    <div id="doc3" class="yui-t4">
      <div id="hd">
        <a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
        <h1>YUI Browser History Manager: TabView</h1>
      </div>
      <div id="bd">
        <div id="toc" class="yui-b">
          <ul>
            <li class="sect"><a href="../index.html">YUI Browser History Manager: Tutorials</a></li>
            <li class="item"><a href="../navbar/index.html">Simple Navigation Bar</a></li>
            <li class="item selected"><a href="index.html">TabView Control</a></li>
            <li class="child active"><a href="index.html">Tutorial</a></li>
            <li class="child"><a href="solution.html">Functional Example</a></li>
            <li class="item"><a href="../calendar/index.html">Calendar Control</a></li>
            <li class="item"><a href="../multi/index.html">Multiple Modules</a></li>
          </ul>
        </div>
        <div id="yui-main">
          <div class="yui-b">

            <p>
              This example demonstrates how to use the Browser History Manager
              to remember which tabs have been visited with the TabView widget
              and dynamically update it when the user presses the browser's
              back/forward buttons.
            </p>

            <h2>Import the source files and dependencies</h2>

            <p>
              In our example, we need the Event Utility, DOM Utility, TabView Widget, and the Browser History Manager:
            </p>

<textarea name="code" class="HTML" cols="60" rows="1">
<link rel="stylesheet" type="text/css" href="tabview.css"/>
<link rel="stylesheet" type="text/css" href="border_tabs.css"/>
<script src="yahoo.js"></script>
<script src="event.js"></script>
<script src="dom.js"></script>
<script src="element-beta.js"></script>
<script src="tabview.js"></script>
<script src="history-experimental.js"></script>
</textarea>

            <h2>Basic markup</h2>

            <p>
              In our example, the TabView widget relies on the following markup:
            </p>

<textarea name="code" class="HTML" cols="60" rows="1">
<div id="demo" class="yui-navset">
  <ul class="yui-nav">
    <li class="selected"><a href="#lorem"><em>lorem</em></a></li>
    <li><a href="#ipsum"><em>ipsum</em></a></li>
    <li><a href="#dolor"><em>dolor</em></a></li>
  </ul>
  <div class="yui-content">
    <div id="lorem">
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing
        elit, sed diam nonummy nibh euismod tincidunt ut
        laoreet dolore magna aliquam erat.
      </p>
    </div>
    <div id="ipsum">
      <ul>
        <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
        <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
        <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
        <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
      </ul>
    </div>
    <div id="dolor">
      <form action="#">
        <fieldset>
          <legend>Lorem Ipsum</legend>
          <label for="foo"><input id="foo" name="foo"></label>
          <input type="submit" value="submit">
        </fieldset>
      </form>
    </div>
  </div>
</div>
</textarea>

            <h2>Design your application</h2>
            
            <p>
              In our simple example, we have only one module, represented by the
              TabView widget. We will refer to this module using the identifier
              "tabview". The state of the TabView module will be represented
              using the string <code>"tab"</code> followed by the selected tab
              index (e.g. <code>"tab2"</code> if the third tab is selected)
            </p>

            <h2>Retrieve the initial state of the TabView module</h2>
            
            <p>
              Use the <code>YAHOO.util.History.getBookmarkedState</code> method
              and default to the first tab:
            </p>

<textarea name="code" class="JScript" cols="60" rows="1">
var bookmarkedTabViewState = YAHOO.util.History.getBookmarkedState( "tabview" );
var initialTabViewState = bookmarkedTabViewState || "tab0";
</textarea>

            <h2>Register the TabView module</h2>

            <p>
              Use the <code>YAHOO.util.History.register</code> method, passing in
              the TabView module identifier, the initial state of the TabView
              module, and the callback function that will be called when the
              state of the TabView module has changed:
            </p>

<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.util.History.register( "tabview", initialTabViewState, function( state ) {
    // Select the tab according to the "state" parameter:
    tabView.set( "activeIndex", state.substr(3) );
} );
</textarea>

            <h2>Subscribe to the Browser History Manager <code>onLoad</code> event</h2>

            <p>
              Use the Browser History Manager <code>onLoad</code> event handler
              to instantiate the TabView widget. Also, retrieve the current
              state of the TabView module, and use that state to select the
              right tab (the current state may be different from the initial
              state under certain circumstances - see the User's Guide)
            </p>

<textarea name="code" class="JScript" cols="60" rows="1">
var tabView;

YAHOO.util.History.onLoadEvent.subscribe( function() {
    // Instantiate the TabView widget
    tabView = new YAHOO.widget.TabView( "demo" );
    tabView.addListener( "activeTabChange", handleTabViewActiveTabChange );

    // Retrieve the current state of the TabView module and select the appropriate tab
    var currentTabViewState = YAHOO.util.History.getCurrentState( "tabview" );
    tabView.set( "activeIndex", currentTabViewState.substr(3) );
} );
</textarea>

            <h2>Add history entries</h2>

            <p>
              A new history entry must be added every time the user selects
              a tab. Use the TabView widget's <code>activeTabChange</code>
              event handler (set to <code>handleTabViewActiveTabChange</code> -
              see above):
            </p>

<textarea name="code" class="JScript" cols="60" rows="1">
function handleTabViewActiveTabChange( e ) {
    var currentTabViewState = YAHOO.util.History.getCurrentState( "tabview" );
    var newTabViewState = "tab" + this.getTabIndex( e.newValue );
    // The following test is crucial. Otherwise, we end up circling forever.
    // Indeed, YAHOO.util.History.navigate will call the module onStateChange callback,
    // which will call tabView.set, which will call this handler and it keeps
    // going from here...
    if ( newTabViewState != currentTabViewState )
        YAHOO.util.History.navigate( "tabview", newTabViewState );
}
</textarea>

            <h2>Initialize the Browser History Manager</h2>

            <p>
              Simply call <code>YAHOO.util.History.initialize</code> from a script
              block located right after the opening body tag:
            </p>

<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.util.History.initialize();
</textarea>

            <div id="stepnav">
              <a class="next" href="solution.html">Continue to <em>Functional Example</em> &gt;</a>
            </div>

          </div>
        </div>
      </div>
      <div id="ft">&nbsp;</div>
    </div>
    <script src="../../../examples/assets/dpSyntaxHighlighter.js"></script>
    <script language="javascript">
      dp.SyntaxHighlighter.HighlightAll('code');
    </script>
  </body>
</html>
